<template>
  <div class="article-page">
    <nuxt-link class="longer" v-if="pageIndex>1" :to="{ path: `/indexlist/${pageIndex-1}`}">上一页</nuxt-link>
    <nuxt-link  v-for="n in pagesMax" :key="n.id" v-if="pagesMin<=n" :to="{ path: `/indexlist/${n}`}" :class="{cur:n==pageIndex}">{{n}}</nuxt-link>
    <nuxt-link class="longer" v-if="pageIndex+1 <= articlePageData.data.pages" :to="{ path: `/indexlist/${pageIndex+1}`}">下一页</nuxt-link>
    <span>共{{pages}}页</span>
  </div>
</template>
<script>
export default {
  props:{
    articlePageData:{
      type: Object,
      default: function() {
        return {
          status: 0,
          data: []
        };
      }
    }
  },
  data(){
    return{
      pageIndex:this.articlePageData.data.pageIndex,
      pages:this.articlePageData.data.pages,
    }
  },
  methods:{

  },
  computed:{
    pagesMax(){
       return this.pageIndex+5 > this.pages ? this.pages : this.pageIndex+2;
    },
    pagesMin(){
      return this.pageIndex+5 > this.pages ? this.pages-5 : this.pageIndex-2;
    }
  }
}
</script>
<style lang="less">
.article-page{
  width: 100%; overflow: hidden; text-align: center; padding: 15px 0 25px 0;
  a{
    display: inline-block; transition: background .5s,color .1s; background: #f0f0f0; min-width: 30px; line-height: 30px; margin: 0 5px;
    &:hover{
      background: #58b0e0; color: #fff;
    }
    &.cur{
      color: #fff; background: #58b0e0;
    }
  }
  .longer{
    padding: 0 10px;
  }
  span{
    padding-left: 15px;
  }
}
</style>
